<script setup>
import { ref } from 'vue'

//帖子列表数据
const posts = ref([])
//选择查询类型
const type = ref('全部')
const tmpType = ref('全部')
const types = ref([
  {
    "id": 1,
    "typeName":"全部"
  },{
    "id": 2,
    "typeName":"作者名"
  },{
    "id": 3,
    "typeName":"内容"
  }])
//按帖子作者姓名或内容查询
const content = ref('')
const tmpContent = ref('')
//按起始时间查询
const startTime = ref('')
const tmpStartTime = ref('')
//按截至时间查询
const endTime = ref('')
const tmpEndTime = ref('')

//分页条数据
const pageNum = ref(1)//当前页
const total = ref(0)//总条数
const pageSize = ref(2)//每页条数

//回显帖子列表
import {postListService} from '@/api/post.js'

const postList = async () => {
  let params = {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
    name: type.value !== "内容" ? content.value : null,
    content: type.value !== "作者名" ? content.value : null,
    startTime: startTime.value ? startTime.value : null,
    endTime: endTime.value ? endTime.value : null,
  }
  let result = await postListService(params);

  total.value = result.data.total;
  posts.value = posts.value.concat(result.data.items);
}

const initPostList = () => {
  posts.value = [];
  type.value = tmpType.value;
  content.value = tmpContent.value;
  startTime.value = tmpStartTime.value;
  endTime.value = tmpEndTime.value;
  pageNum.value = 1;
  postList()
}
//初始化帖子列表
initPostList()

const loadMore =  () => {
  pageNum.value = pageNum.value + 1;
  postList();
}
</script>

<template>
  <el-card>
    <div class="extra">
<!--      <el-button type="primary" @click="visibleDrawer = true">新建话题</el-button>-->
    </div>
    <el-form inline>
      <el-form-item label="发布时间：">
        <div class="block">
          <el-date-picker
              v-model="tmpStartTime"
              type="datetime"
              placeholder="开始时间"
              format="YYYY/MM/DD hh:mm:ss"
              value-format="YYYY-MM-DDTHH:mm:ss"
          />
        </div>
        <div class="line" />
        <div class="block">
          <el-date-picker
              v-model="tmpEndTime"
              type="datetime"
              placeholder="结束时间"
              format="YYYY/MM/DD HH:mm:ss"
              value-format="YYYY-MM-DDTHH:mm:ss"
          />
        </div>
      </el-form-item>
    </el-form>
    <el-form-item label="查询：">
      <el-select placeholder="请选择" v-model="tmpType">
        <el-option v-for="t in types" :key="t.id" :label="t.typeName" :value="t.typeName">
        </el-option>
      </el-select>
      <el-input v-model="tmpContent">
        <span>{{type}}/</span>
        <span>{{tmpType}}/</span>
        <span>{{content}}/</span>
        <span>{{tmpContent}}/</span>
        <span>{{startTime}}/</span>
        <span>{{tmpStartTime}}/</span>
        <span>{{endTime}}/</span>
        <span>{{tmpEndTime}}/</span>
        <span>{{pageNum}}/</span>
        <span>{{pageSize}}/</span>
        <span>{{total}}/</span>
      </el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="initPostList">搜索</el-button>
      <el-button @click="tmpType = '全部'; tmpContent = ''; tmpStartTime = ''; tmpEndTime = ''">重置</el-button>
    </el-form-item>
    <el-table :data="posts" style="width: 100%">
      <el-table-column label="发布时间" width="400" prop="postTime"></el-table-column>
      <el-table-column label="内容" width="400" prop="content"></el-table-column>
      <el-table-column label="作者" width="400" prop="name"></el-table-column>
      <el-table-column label="帖子id" width="400" prop="postId"></el-table-column>
    </el-table>
    <span v-if="posts.length < total" @click="loadMore">点击加载更多</span>
    <span v-else>没有更多了</span>
  </el-card>
</template>

<style scoped>

</style>